<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="author" content="David Majda (david@majda.cz)">
    <meta name="copyright" content="Copyright &copy; 2010&ndash;2011 David Majda">
    <meta name="keywords" content="parser generator, PEG, JavaScript">
    <meta name="description" content="PEG.js is a parser generator for JavaScript based on the parsing expression grammar formalism.">
    <title>Online version &raquo; PEG.js &ndash; Parser Generator for JavaScript</title>
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="layout-online.css">
    <link rel="stylesheet" href="content.css">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <!--[if IE]>
    <script>
      var html5elements = ["aside", "footer", "header", "nav"];
      for (var i = 0; i < html5elements.length; i++) {
        document.createElement(html5elements[i]);
      }
    </script>
    <![endif]-->
  </head>
  <body>

    <div id="loader">
      <div id="loader-inner">Loading...</div>
    </div>

    <div id="content">
      <table id="columns">
  <tr>
    <td>
      <table class="column" id="left-column">
        <tr>
          <td class="content-height">
            <h2 class="suggestion top">
              <span class="step-number">1</span>
              <div class="step-title">Write your PEG.js grammar</div>
            </h2>
          </td>
        </tr>
        <tr>
          <td>
            <div class="textarea-wrapper">
              <textarea class="code" id="grammar" disabled>/*
 * Classic example grammar, which recognizes simple arithmetic expressions like
 * "2*(3+4)". The parser generated from this grammar then computes their value.
 */

start
  = additive

additive
  = left:multiplicative "+" right:additive { return left + right; }
  / multiplicative

multiplicative
  = left:primary "*" right:multiplicative { return left * right; }
  / primary

primary
  = integer
  / "(" additive:additive ")" { return additive; }

integer "integer"
  = digits:[0-9]+ { return parseInt(digits.join(""), 10); }</textarea>
              <div class="tooltip">
                <div class="content">The parser will be generated automatically as you type.</div>
                <div class="arrow"></div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="content-height">
            <div id="build-message" class="message progress">Loading...</div>
          </td>
        </tr>
      </table>
    </td>
    <td>
      <table class="column" id="right-column">
        <tr>
          <td class="content-height">
            <h2 class="suggestion top">
              <span class="step-number">2</span>
              <div class="step-title">Test the generated parser with some input</div>
            </h2>
          </td>
        </tr>
        <tr>
          <td>
            <div class="textarea-wrapper">
              <textarea class="code" id="input" disabled>2*(3+4)</textarea>
              <div class="tooltip">
                <div class="content">The input will be processed by the parser automatically as you type.</div>
                <div class="arrow"></div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="content-height">
            <div id="parse-message" class="message disabled">Parser not available.</div>
          </td>
        </tr>
        <tr>
          <td class="content-height">
            <h2 id="output-header">Output</h2>
            <pre id="output" class="disabled">Output not available.</pre>
          </td>
        </tr>
        <tr>
          <td class="content-height">
            <h2 class="suggestion">
              <span class="step-number">3</span>
              <div class="step-title">Download the parser code</div>
            </h2>
          </td>
        </tr>
        <tr>
          <td class="content-height">
            <a id="parser-download" class="disabled" href="#">Download parser</a>
            <div id="settings">
              <label for="parser-var">Parser variable:</label>
              <input type="text" id="parser-var" value="dslparser" disabled>
            </div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<script src="../jquery.js"></script>
<script src="peg.js"></script>
<script src="webtoolkit.base64.js"></script>
<script src="../jsDump.js"></script>
<script src="online.js"></script>
<script type="text/javascript" src="../date.js"></script>

    </div>
  </body>
</html>
